<!-- <template> -->
  <!-- 为“Echarts”准备一个具备宽度和高度的DOM容器↓ -->
  <!-- <div class="dashboard-container" ref="main" id="main" style="width:600px;height:400px;"> -->
    <!-- name: {{ name }} -->
    <!-- <div class="dashboard-text">{{name}}</div> -->
  <!-- </div> -->
<!-- </template> -->
<template>
  <div class="dashboard-container">
    <!-- 面板统计组件↓ -->
    <panel-group :userTotal="userTotal" :articleTotal="articleTotal" :questionTotal="questionTotal" />
    <!-- Row组件提供“gutter”属性来指定每一栏之间的间隔，默认间隔为0↓ -->
    <el-row :gutter="40">
      <!-- “xs”表示“<768px响应式栅格数或者栅格属性对象”，“sm”表示“≥768px响应式栅格数或者栅格属性对象”，“lg”表示“≥1200px响应式栅格数或者栅格属性对象”。“xs”、“sm”、“lg”被用来控制被显示的格子的数量 -->
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
        <!-- 注意：“Echarts”在初始化实例的时候就要拿到数据，有数据就会展示出来 -->
        <!-- 饼状图：各技术频道文章统计 -->
        <pie-chart v-if="flag" :legendData="categorytotal.namelist" :seriesData="categorytotal.nameAndValueList" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
        <!-- 柱状图：近6个月发布的文章数 -->
        <bar-chart v-if="flag" :xAxisData="monthArticleTotal.yearMonthList" :seriesData="monthArticleTotal.aritcleTotalList" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入“Echarts”
import echarts from "echarts"
import PieChart from "./components/PieChart"
import BarChart from "./components/BarChart"
import PanelGroup from "./components/PanelGroup"
// 1.导入“home.js”
import api from '@/api/home'
export default {
  /* mounted() {
    this.showMain()
  },
  methods: {
    showMain() {
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById("main"))
      var myChart = echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      var option = {
        title: { // ←左边这项表示“图表展示时的标题”
          text: "ECharts 入门示例"
        },
        tooltip: { // ←左边这项表示“提示内容”
          show:true // ←左边这项表示“是否显示提示框组件”
        },
        legend: { // ←左边这项是“图例”组件，点击后会显示或隐藏图表的主体部分
          data: ["销量"]
        },
        xAxis: { // ←左边这项表示“X轴的配置”
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: { // ←左边这项表示“Y轴的配置”
        },
        series: [ // ←左边这项表示“序列”，它被用于配置核心数据
          {
            name: "销量", // ←左边这项表示“系列的名称”，被用于显示在提示框中
            type: "bar", // ←左边这项被用于指定使用哪个类型的图表
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 使用在上面↑指定的配置项和数据显示图表
      myChart.setOption(option)
    }
  } */
  name: 'Dashboard',
  components: {PieChart,BarChart,PanelGroup},
  data() {
    return {
      userTotal:0, // ←左边这项表示“总用户数”
      articleTotal:0, // ←左边这项表示“总文章数”
      questionTotal:0, // ←左边这项表示“总提问数”
      categorytotal:{}, // ←左边这项表示“每个分类下的文章数”
      monthArticleTotal:{}, // ←左边这项表示“查询近6个月发布的文章数”
      flag:false, // ←左边这项表示“是否显示图表组件”
    }
  },
  mounted(){
    // 查询面板中相关的总记录数
    this.getTotal()
    // 统计各技术频道中的文章数和近6个月发布的文章数
    this.getArticleTotal()
  },
  methods: {
    async getTotal(){
      // 查询总用户数
      // “data:userTotal”表示“为‘data’取别名为‘userTotal’”，下同↓
      const {data:userTotal} = await api.getUserTotal()
      this.userTotal = userTotal
      // 查询总文章数
      const {data:articleTotal} = await api.getArticleTotal()
      this.articleTotal = articleTotal
      // 查询总提问数
      const {data:questionTotal} = await api.getQuestionTotal()
      this.questionTotal = questionTotal
    },
    async getArticleTotal(){
      // 统计各技术频道中的文章数
      const {data:categorytotal} = await api.getCategoryTotal()
      this.categorytotal = categorytotal
      // 统计近6个月发布的文章数
      const {data:monthArticleTotal} = await api.getMonthArticleTotal()
      this.monthArticleTotal = monthArticleTotal
      // 先查询到数据，再加载图表组件，将数据渲染
      this.flag = true
    },
  },
}
/* import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
} */
/* import api from '@/api/test'
export default {
  name: 'Dashboard',
  data() {
    return {
      name:{}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(){
      api.test().then(response => { // ←“.then()”被用来获取“Promise”对象中正常响应的数据（即“response”）
        console.log(response)
        this.name = response
      })
    }
  },
} */
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
